<script setup lang="ts">
import type { EvaluateDoc } from '@/types/room'
import { defineProps } from 'vue'
defineProps<{
    evaluateDoc?: EvaluateDoc
}>()
</script>

<template>
    <div class="evaluate-card" v-if="evaluateDoc">
        <p class="title">医生服务评价</p>
        <p class="desc">我们会更加努力提升服务质量</p>
        <van-rate :modelValue="evaluateDoc.score" size="7vw" gutter="3vw" color="#FADB14" void-icon="star"
            void-color="rgba(0,0,0,0.04)" />
    </div>
    <div class="evaluate-card" v-else>
        <p class="title">感谢您的评价</p>
        <p class="desc">本次在线问诊服务您还满意吗？</p>
        <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" />
        <van-field type="textarea" maxlength="150" show-word-limit rows="3"
            placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"></van-field>
        <div class="footer">
            <van-checkbox>匿名评价</van-checkbox>
            <van-button type="primary" size="small" round> 提交评价 </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.evaluate-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;

    .title {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .desc {
        font-size: 12px;
        margin-bottom: 15px;
        color: var(--cp-tip);
    }

    .van-field {
        background-color: var(--cp-bg);
        margin: 15px 0;
        border-radius: 8px;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        :deep() {
            .van-checkbox {
                .van-icon {
                    font-size: 12px;
                }

                &__label {
                    font-size: 12px;
                    color: var(--cp-tip);
                }

                height: 16px;
            }

            .van-button {
                padding: 0 16px;

                &.disabled {
                    opacity: 1;
                    background: #fafafa;
                    color: #d9dbde;
                    border: #fafafa;
                }
            }
        }
    }
}
</style>